<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('忘记密码')">

</head>

<body>

<div id="app">

    <img th:src="${#request.getAttribute('ctx') + '/static/front/img/login-bg.png'}" class="login_bg" alt="">
    <a th:href="@{/}" class="login-index">
        <img th:src="${#request.getAttribute('ctx') + '/static/logo.png'}" alt="">
    </a>
    <div class="login_box clearfix">
        <div class="login_box_left">
<!--            <img cus:sysc="retrieve-page-pic,retrieve-page-pic,${#request.getAttribute('uploadServer')},,src">-->
        </div>
        <div class="login_box_right register_box_right">
            <img th:src="${#request.getAttribute('ctx') + '/static/front/img/wangji.png'}" style="display: block;margin-bottom: 20px; width: 100px;">
            <img th:src="${#request.getAttribute('ctx') + '/static/front/img/text.png'}" style="display: block;margin-bottom: 32px; width: 168px;">
            <form :model="form">
                <div class="text">
                    <i></i>
                    <input class="mobile-for-sms-code" type="text" name="mobile" id="phone" v-model="form.mobile" @change="mobileVali" placeholder="请输入手机号"/>
                    <span class="c_phone">手机号格式错误</span>
                    <span class="k_phone">手机号不能为空</span>
                </div>

                <div class="text">
                    <i></i>
                    <input type="password" name="password" id="password" v-model="form.password" placeholder="密码 (6-16位字母、数字、下划线)"/>
                    <span class="c_pass">密码不能少于6位或是大于16位</span>
                    <span class="k_pass">密码不能为空</span>
                </div>
                <div class="text">
                    <i></i>
                    <input type="password" name="passwords" id="password_2" v-model="form.passwords" placeholder="确认密码"/>
                    <span class="c_pass_2">两次密码不一致</span>
                    <span class="k_pass_2">确认密码不能为空</span>
                </div>
                <div class="text">
                    <i></i>
                    <input style="width: 55%;" type="text" name="validate" id="verify" v-model="form.validate" placeholder="验证码"/>
                    <button type="button" class="get-sms-code" :disabled="!iscross" :style="color" style="border: 0; background: #fff; cursor: pointer; width:30%; height: 28px; color:#ff5722;">
                        发送验证码
                    </button>
                    <span class="c_verify">验证码错误</span>
                    <span class="k_verify">验证码不能为空</span>
                </div>
                <div class="submit">
                    <input type="button" value="重置密码" :disabled="!iscross" :style="background" @click="retrieve"/>
                </div>

            </form>


        </div>
    </div>
</div>
</body>

<!--/* 公用js */-->
<script type="text/javascript" th:src="@{'/static/common/jquery.min.js'}"></script>

<script type="text/javascript" th:src="@{'/static/common.js?v=0.1'}"></script>
<!--/* 自定义常量 */-->
<script type="text/javascript" th:src="@{'/static/common/constant.js?v=0.1'}"></script>
<!--/* 自定义工具类 */-->
<script type="text/javascript" th:src="@{'/static/common/tools/tools.vue.js?v=0.1'}"></script>
<script type="text/javascript" th:src="@{'/static/common/tools/tools.extend.js?v=0.1'}"></script>
<script type="text/javascript" th:src="@{'/static/common/tools/tools.validate.js?v=0.1'}"></script>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript" charset="utf-8"></script>

<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: {
            form: {
                mobile: '',
                password: '',
                passwords: '',
                validate: ''
            },
            iscross: false,
            color: {color: 'rgb(211, 211, 211)'},
            background: {background: 'rgb(211, 211, 211)'}
        },
        methods: {
            mobileVali: function () {
                if ($.trim(this.form.mobile).length != 0 && Pattern.CHINA_MOBILE.test(this.form.mobile)) {
                    this.iscross = true;
                    this.color.color = '#ff5722';
                    this.background.background = '#ff5722';
                } else {
                    this.iscross = false;
                    this.color.color = 'rgb(211, 211, 211)';
                    this.background.background = 'rgb(211, 211, 211)';
                }
            },

            retrieve: function (data) {
                var _self = this;
                $.ajax({
                    url: '/api/retrieve',
                    type: 'post',
                    data: {
                        mobile: this.form.mobile,
                        password: this.form.password,
                        passwords: this.form.passwords,
                        validate: this.form.validate
                    },
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                    },
                    dataType: 'json',
                    success: function (result) {
                        if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                            ELEMENT.Message.success(Messages.RETRIEVE_SUCCESS);
                            setTimeout(function() {
                                window.location.href = ctx + '/login';
                            }, 3000);
                        } else {
                            ELEMENT.Message.error(result.error);
                        }
                    },
                    error: function (result) {
                        ELEMENT.Message.error(Messages.ERROR);
                    }
                })
            }
        }
    })
</script>

</html>
